<template>
  <el-row :gutter="20" class="grid-item-row">
    <el-col :span="4">
      <div class="grid-item" @click="toMonitordetail(monitorData[0])" v-if="monitorData && monitorData.length > 0">
        <span class="floor">L1</span>
        <el-row class="status" type="flex" justify="space-around" align="middle">
          <img class="elevator-status" :src="elevator_status" />
          <span class="elevator">03</span>
          <img class="door-status"  :src="door_status"/>
        </el-row>
        <span v-if="status" class="status-normal">正常运行</span>
        <span v-else class="status-error">停止运行</span>
      </div>
    </el-col>
    <el-col :span="4">
      <div class="grid-item" @click="toMonitordetail(monitorData[1])" v-if="monitorData && monitorData.length > 1">
        <span class="floor">L1</span>
        <el-row class="status" type="flex" justify="space-around" align="middle">
          <img class="elevator-status" :src="elevator_status" />
          <span class="elevator">03</span>
          <img class="door-status"  :src="door_status"/>
        </el-row>
        <span v-if="status" class="status-normal">正常运行</span>
        <span v-else class="status-error">停止运行</span>
      </div>
    </el-col>
    <el-col :span="4">
      <div class="grid-item" @click="toMonitordetail(monitorData[2])" v-if="monitorData && monitorData.length > 2">
        <span class="floor">L1</span>
        <el-row class="status" type="flex" justify="space-around" align="middle">
          <img class="elevator-status" :src="elevator_status" />
          <span class="elevator">03</span>
          <img class="door-status"  :src="door_status"/>
        </el-row>
        <span v-if="status" class="status-normal">正常运行</span>
        <span v-else class="status-error">停止运行</span>
      </div>
    </el-col>
    <el-col :span="4">
      <div class="grid-item" @click="toMonitordetail(monitorData[3])" v-if="monitorData && monitorData.length > 3">
        <span class="floor">L1</span>
        <el-row class="status" type="flex" justify="space-around" align="middle">
          <img class="elevator-status" :src="elevator_status" />
          <span class="elevator">03</span>
          <img class="door-status"  :src="door_status"/>
        </el-row>
        <span v-if="status" class="status-normal">正常运行</span>
        <span v-else class="status-error">停止运行</span>
      </div>
    </el-col>
    <el-col :span="4">
      <div class="grid-item" @click="toMonitordetail(monitorData[4])" v-if="monitorData && monitorData.length > 4">
        <span class="floor">L1</span>
        <el-row class="status" type="flex" justify="space-around" align="middle">
          <img class="elevator-status" :src="elevator_status" />
          <span class="elevator">03</span>
          <img class="door-status"  :src="door_status"/>
        </el-row>
        <span v-if="status" class="status-normal">正常运行</span>
        <span v-else class="status-error">停止运行</span>
      </div>
    </el-col>
    <el-col :span="4">
      <div class="grid-item" @click="toMonitordetail(monitorData[5])" v-if="monitorData && monitorData.length > 5">
        <span class="floor">L1</span>
        <el-row class="status" type="flex" justify="space-around" align="middle">
          <img class="elevator-status" :src="elevator_status" />
          <span class="elevator">03</span>
          <img class="door-status"  :src="door_status"/>
        </el-row>
        <span v-if="status" class="status-normal">正常运行</span>
        <span v-else class="status-error">停止运行</span>
      </div>
    </el-col>
</el-row>
</template>

<script>
export default {
  name: 'MonitorGridItem',
  props: {
    monitorData: {
      type: Array,
      required:true
    }
  },
  data() {
      
      return {
        status:true,
        elevator_status:"",
        door_status:""
      };
    },
    methods: {
      handleSelectionChange: function() {

      },
      toMonitordetail(item) {
        this.$router.push({ path:'/MonitorDetail'});
      }
    },
    mounted() {
      printLog("EntityMain   mounted");
    },
    watch: {
    }
}
</script>

<style lang="scss" scoped>
.grid-item-row {
  height: 170px;
}
.grid-item {
  width: 100%;
  height: 130px;
  padding-top: 10px;
  background-color: #2C3347;
  display: block;
  .floor {
    width: 100%;
    font-size: 20px;
    color: white;
    margin-left: 15px;
    display: block;
    font-family: lcdf;
  }

  .status {
    margin-top: 20px;
  }
  .elevator-status {
    width: 20px;
    height: 20px;
  }

  .elevator {
    padding-top: 5px;
    font-size: 30px;
    color: white;
    font-family: lcdf;
  }

  .door-status {
    width: 20px;
    height: 20px;
  }

  .status-normal {
    margin-top: 20px;
    margin-left: 15px;
    font-size: 14px;
    color: rgb(123, 189, 31);
    display: block;
  }

  .status-error {
    margin-top: 20px;
    margin-left: 15px;
    font-size: 14px;
    color: rgb(197, 43, 43);
    display: block;
  }
}
</style>